<template>
	<view class="content">
		
		<!-- 认养宣传 --> 
		<view class="custom-swiper">
			<u-swiper :list="bannerList" indicator indicatorMode="line" circular height="230" imgMode="aspectFit"
				bgColor="#f8f8f8"></u-swiper>
		</view>
		
		<!-- 热点消息 -->
		<view class="hotspot">
			<u-notice-bar :text="noticeList" direction="column" :duration="3500" bgColor="#FFFBE5"></u-notice-bar>
			<!-- 纵向滚动 -->
		</view>

		<!-- 标题栏 -->
		<view class="section-header">
			<view class="section-title">农场认养</view>
			<view class="section-more" @click="goToAdoptList">
				查看更多 <text class="section-more-icon">></text>
			</view>
		</view>
		
		<!-- 认养项目列表 -->
		<view class="adopt-list">
			<!-- 循环渲染认养项目 -->
			<view class="adopt-item" v-for="item in adoptItems" :key="item.id">
				<view class="item-left">
					<view class="image-container">
						<image class="adopt-image" :src="item.image" mode="aspectFill"></image>
				<view class="adopt-badge">认</view>
					</view>
				</view>
				<view class="adopt-info">
					<view class="adopt-title">{{item.title}}</view>
					<view class="adopt-subtitle">收获: {{item.subtitle}}</view>
					<view class="adopt-meta">
						<view class="adopt-remain">已售:{{item.sold}}</view>
						<view class="adopt-sales">剩余:{{item.remain}}</view>
					</view>
					<view class="progress-wrap">
						<u-line-progress :percentage="calculatePercentage(item.sold, item.remain)" :showText="false"
							height="10" activeColor="#4CAF50" inactiveColor="#f5f5f5">
							<text class="u-percentage-slot">{{calculatePercentage(item.sold, item.remain)}}%</text>
						</u-line-progress>
					</view>
					<view class="adopt-price-row">
						<view class="adopt-price">¥ {{item.price}}</view>
						<view class="adopt-btn" :class="{'adopt-btn-sold': item.remain === 0}" @click="goToDetail(item)">
							{{item.remain === 0 ? '售罄' : '进行中'}}
					</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '@/util/request.js';

	export default {
		data() {
			return {
				// 热点信息数据
				noticeList: [
					'可视化在线认养农场，小程序开发',
					'新鲜有机蔬果，支持定期配送到家',
					'农场开放日活动，欢迎预约参观体验'
				],
				// 轮播图数据
				bannerList: [],
				// 认养项目数据
				adoptItems: [],
				// 认养项目展示数量限制
				displayLimit: 3
			}
		},
		methods: {
			// 计算百分比
			calculatePercentage(sold, remain) {
				const total = sold + remain;
				// 防止除零错误
				if (total === 0) {
					return 0;
				}
				return Math.floor((sold / total) * 100);
			},

			// 跳转到认养列表页面
			goToAdoptList() {
				uni.navigateTo({
					url: '/pages/farm/adoptList'
				});
			},
			
			// 跳转到认养详情页面
			goToDetail(item) {
				// 如果已售罄，不允许跳转
				if (item.remain === 0) {
					uni.showToast({
						title: '该项目已售罄',
						icon: 'none'
					});
					return;
				}
				
				uni.navigateTo({
					url: `/pages/farm/adoptDetail?id=${item.id}`
				});
			},

			// 获取轮播图数据
			getBannerList() {
				request({
					url: '/adopt-service/adopt-banner/list',
					method: 'GET'
				}).then(res => {
					if (res.success && res.data.bannerList) {
						// 先按sort字段排序
						const sortedList = [...res.data.bannerList].sort((a, b) => a.sort - b.sort);
						// 处理图片URL，添加基础路径
						this.bannerList = sortedList.map(item => {
							return `http://121.36.197.175:19000/test/${item.bannerUrl}`;
						});
					} else {
						uni.showToast({
							title: '获取轮播图失败',
							icon: 'none'
						});
					}
				}).catch(err => {
					console.error('获取轮播图出错', err);
				});
			},

			// 获取认养项目列表
			getAdoptList() {
				request({
					url: '/adopt-service/adopt/list',
					method: 'GET'
				}).then(res => {
					if (res.success && res.data.adoptList) {
						// 处理图片URL，添加基础路径
						let processedList = res.data.adoptList.map(item => {
							return {
								...item,
								image: `http://121.36.197.175:19000/test/${item.image}`
							};
						});

						// 限制展示数量
						if (this.displayLimit > 0) {
							processedList = processedList.slice(0, this.displayLimit);
						}

						this.adoptItems = processedList;
					} else {
						uni.showToast({
							title: '获取认养项目失败',
							icon: 'none'
						});
					}
				}).catch(err => {
					console.error('获取认养项目出错', err);
				});
			}
		},
		created() {
			// 页面创建时获取数据
			this.getBannerList();
			this.getAdoptList();
		}
	}
</script>

<style>
	.content {
		width: 100%;
		background-color: #f5f5f5;
	}
	
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #333333;
		color: #ffffff;
		padding: 20rpx 30rpx;
		position: relative;
	}
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
	}
	
	.search-btn {
		background-color: rgba(255, 255, 255, 0.3);
		border-radius: 50%;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	/* 自定义轮播图 */
	.custom-swiper {
		width: 100%;
		position: relative;
		margin-bottom: 0;
	}
	
	.swiper {
		display: none;
	}

	.swiper-item {
		display: none;
	}
	
	.swiper-image {
		display: none;
	}
	
	.hotspot {
		width: 100%;
		padding: 0;
		margin: 0;
		background-color: #FFFBE5;
	}
	
	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		/* background-color: #ffffff; */
		margin: 0 20rpx 20rpx;
		border-radius: 12rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #4CAF50;
	}
	
	.section-more {
		font-size: 26rpx;
		color: #999;
		display: flex;
		align-items: center;
		padding: 10rpx;
		border-radius: 6rpx;
		transition: background-color 0.3s;
	}
	
	.section-more:active {
		background-color: #f0f0f0;
	}

	.section-more-icon {
		margin-left: 4rpx;
	}
	
	.adopt-list {
		padding: 0 20rpx;
	}
	
	.adopt-item {
		background-color: #ffffff;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		padding: 20rpx;
		display: flex;
		position: relative;
		align-items: flex-start;
	}

	.item-left {
		margin-right: 20rpx;
		display: flex;
		align-items: center;
		height: 100%;
	}

	.image-container {
		position: relative;
		width: 240rpx;
		height: 240rpx;
	}
	
	.adopt-badge {
		background-color: #FFA726;
		color: #ffffff;
		font-size: 24rpx;
		width: 40rpx;
		height: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 6rpx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}
	
	.adopt-info {
		flex: 1;
		width: 0;
		overflow: hidden;
		max-width: calc(100% - 260rpx);
	}
	
	.adopt-title {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}
	
	.adopt-subtitle {
		font-size: 26rpx;
		color: #999;
		margin-bottom: 10rpx;
	}
	
	.adopt-meta {
		display: flex;
		margin-bottom: 10rpx;
	}
	
	.adopt-remain {
		font-size: 24rpx;
		color: #999;
		margin-right: 20rpx;
	}
	
	.adopt-sales {
		font-size: 24rpx;
		color: #999;
	}

	.progress-container {
		margin-bottom: 15rpx;
		width: 100%;
		box-sizing: border-box;
		overflow: hidden;
	}
	
	.adopt-price-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.adopt-price {
		color: #FF5722;
		font-size: 36rpx;
		font-weight: bold;
	}
	
	.adopt-btn {
		background-color: #4CAF50;
		color: #ffffff;
		font-size: 28rpx;
		padding: 10rpx 30rpx;
		border-radius: 30rpx;
		margin-right: 10rpx;
	}

	.adopt-btn-sold {
		background-color: #F44336 !important;
	}
	
	.adopt-image {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
	}

	/* 进度条样式 */
	::v-deep .u-line-progress__background {
		overflow: hidden;
	}

	/* 进度条样式 */
	.progress-wrap {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
		position: relative;
	}

	.progress-wrap /deep/ .u-line-progress {
		flex: 1;
	}

	.u-percentage-slot {
		color: #000000;
		font-size: 20rpx;
	}

	.progress-text {
		position: absolute;
		right: 10rpx;
		font-size: 20rpx;
		color: #000000;
		z-index: 1;
	}
</style> 